<template>
  <el-card class="index">
      <div slot="header" class="clearfix">
      <span>手动取现配置</span>
      <span><el-switch  style="display: block"   v-model="form.value"  active-color="#13ce66" inactive-color="#D9D9D9" :inactive-value="false" :active-value="true" active-text="开"  inactive-text="关" /></span>
    </div>
    <div class="form" v-if="form.value">
      <el-form :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="180px" >
          <el-form-item label="取现类型" prop="cash_type" style="width: 100%;">
            <el-checkbox-group v-model="form.cash_type" @change="cashTypeChange">
              <el-checkbox label="T1">T1</el-checkbox>
              <el-checkbox label="DM">DM</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-row v-if="form.T1Form.switch_state">
           <el-col :span="12">
             <el-form-item label="T1取现手续费(元)" prop="T1Form.fix_amt" >
              <div class="t1-cash">
                  <el-input type="number" style="width: 275px;" @blur="t1FormfixAmtBlur" v-model="form.T1Form.fix_amt" placeholder="请输入T1取现手续费(元)" clearable  />
                 <el-checkbox style="margin-left: 20px;" true-label="Y" false-label="N" v-model="form.T1Form.is_priority_receipt" >是否优先取现</el-checkbox>
              </div>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="T1取现费率(%)" prop="T1Form.fee_rate">
                 <el-input type="number" style="width: 275px;" @blur="t1FormfeeRatetBlur" v-model="form.T1Form.fee_rate" placeholder="请输入T1取现费率(%)" clearable  />
             </el-form-item>
           </el-col>
        </el-row>
        <el-row >
           <el-col :span="12" v-if="form.T1Form.switch_state">
             <el-form-item label="T1取现手续费外扣标记" prop="T1Form.out_fee_flag" >
              <el-select style="width: 275px;" v-model="form.T1Form.out_fee_flag" clearable placeholder="请选择手续费外扣标记">
                 <el-option label="内扣" value="2" />
                 <el-option label="外扣" value="1" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.T1Form.out_fee_flag == '1' && form.T1Form.switch_state">
            <el-form-item label="T1取现手续费外扣ID" prop="T1Form.out_fee_huifu_id">
                 <el-input maxlength="16" style="width: 275px;" v-model="form.T1Form.out_fee_huifu_id" placeholder="请输入DM取现手续费外扣汇付ID" clearable  />
             </el-form-item>
           </el-col>
        </el-row>
        <el-row v-if="form.DMForm.switch_state">
           <el-col :span="12">
             <el-form-item label="DM取现手续费(元)" prop="DMForm.fix_amt" >
              <div class="t1-cash">
                  <el-input type="number" style="width: 275px;" @blur="dmFormfixAmtBlur  " v-model="form.DMForm.fix_amt" placeholder="请输入DM取现手续费(元)" clearable  />
                 <!-- <el-checkbox style="margin-left: 20px;" v-model="form.radio" >是否优先取现</el-checkbox> -->
              </div>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="DM取现费率(%)" prop="DMForm.fee_rate">
                 <el-input type="number" style="width: 275px;" @blur="dmFormfeeRateBlur" v-model="form.DMForm.fee_rate" placeholder="请输入DM取现费率(%)" clearable  />
             </el-form-item>
           </el-col>
        </el-row>
        <el-row >
           <el-col :span="12" v-if="form.DMForm.switch_state">
             <el-form-item label="DM取现手续费外扣标记" prop="DMForm.out_fee_flag" >
              <el-select style="width: 275px;" v-model="form.DMForm.out_fee_flag" clearable placeholder="请选择手续费外扣标记">
                 <el-option label="内扣" value="2" />
                 <el-option label="外扣" value="1" />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12" v-if="form.DMForm.out_fee_flag == '1' && form.DMForm.switch_state">
            <el-form-item label="DM取现手续费外扣ID" prop="DMForm.out_fee_huifu_id">
                 <el-input maxlength="16" style="width: 275px;" v-model.trim="form.DMForm.out_fee_huifu_id" placeholder="请输入DM取现手续费外扣汇付ID" clearable  />
             </el-form-item>
           </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default{
  name:'cashOutConfig',
  props:{
    qry_cash_config_list:[Array]
      // regionList:
  },
  watch:{
    form:{
      handler(nValue , oValue){
        if(this.form.value){
          // nValue.DMForm.out_cash_flag = nValue.DMForm.out_fee_flag
          // nValue.T1Form.out_cash_flag = nValue.T1Form.out_fee_flag
          this.$emit('cashOutConfigChange' ,nValue)
        }else{
          const value = JSON.parse(JSON.stringify(nValue)) 
          if(this.qry_cash_config_list.length){
            value.T1Form.switch_state = 0
            value.DMForm.switch_state = 0
            this.$emit('cashOutConfigChange' ,value)
          }else{
            this.$emit('cashOutConfigChange' ,{})
          }
        }
        },
          deep:true
    },
    qry_cash_config_list:{
      handler(nValue , oValue){
        if(nValue.length){
          if(nValue[0].switch_state == 1 || nValue[1].switch_state == 1){
          let arrType =  []
          this.form.cash_type = []
        nValue.forEach(item=>{
           if(item.cash_type == 'T1' && item.switch_state == '1'){
            this.form.cash_type.push('T1')
             this.form.T1Form = JSON.parse(JSON.stringify(item))
             this.form.T1Form.out_fee_flag = item.out_cash_flag 
           }else if(item.cash_type == 'DM' && item.switch_state == '1'){
            this.form.cash_type.push('DM')
            this.form.DMForm = JSON.parse(JSON.stringify(item))
            this.form.DMForm.out_fee_flag = item.out_cash_flag 
           }
           arrType.push(item.cash_type)
        })
          this.form.value = true
          // console.log(11111)
          // this.cashTypeChange(arrType)
        }else{
          this.form.value = false
        }
        }
        
        
      },
      deep:true
    },
  },
  data(){
      return{
          form:{
            value:false,
            T1Form:{
              cash_type:''
            },
            DMForm:{
              cash_type:''
            },
            // checkList:[],
            cash_type:[]
          },
          formRules:{
            'cash_type':[{ required: true, message: '请选择取现类型', trigger: 'change' }],
            'T1Form.fix_amt':[{ required: true, message: '请输入取现手续费', trigger: 'change' }],
            'DMForm.fix_amt':[{ required: true, message: '请输入取现手续费', trigger: 'change' }],
            'T1Form.fee_rate':[{ required: true, message: '请输入取现费率', trigger: 'change' }],
            'DMForm.fee_rate':[{ required: true, message: '请输入取现费率', trigger: 'change' }],
            'T1Form.out_fee_flag':[{ required: true, message: '请选择取现手续费外扣标记', trigger: 'change' }],
            'DMForm.out_fee_flag':[{ required: true, message: '请选择取现手续费外扣标记', trigger: 'change' }],
            'T1Form.out_fee_huifu_id':[{ required: true, message: '请输入取现手续费外扣汇付ID', trigger: 'change' }],
            'DMForm.out_fee_huifu_id':[{ required: true, message: '请输入取现手续费外扣汇付ID', trigger: 'change' }],
          },
      }
  },
  methods:{
    cashTypeChange(v){
      const T1Data = v.find(item=> item == 'T1' )
      // console.log(T1Data)
      if(T1Data){
        this.form.T1Form.cash_type = 'T1'
        this.form.T1Form.switch_state = 1
      }else{
        this.form.T1Form.switch_state = 0
      }
      const DMData = v.find(item=> item == 'DM' )
      // console.log(DMData)
      if(DMData){
        this.form.DMForm.switch_state = 1
        this.form.DMForm.cash_type = 'DM'
      }else{
        this.form.DMForm.switch_state = 0
      }
      setTimeout(()=>{
        this.form.cash_type = v
        this.$forceUpdate()
      })
    },
    dmFormfixAmtBlur(val){
      if(this.form.DMForm.fix_amt){
        this.form.DMForm.fix_amt = (this.form.DMForm.fix_amt * 1).toFixed(2)
        this.$forceUpdate()
      }
    },
    dmFormfeeRateBlur(val){
      if(this.form.DMForm.fee_rate){
        this.form.DMForm.fee_rate = (this.form.DMForm.fee_rate * 1).toFixed(2)
        this.$forceUpdate()
      }
      
    },
    t1FormfixAmtBlur(val){
      if(this.form.T1Form.fix_amt){
        this.form.T1Form.fix_amt = (this.form.T1Form.fix_amt * 1).toFixed(2)
      this.$forceUpdate()

      }
    },
    t1FormfeeRatetBlur(val){
      if(this.form.T1Form.fee_rate){
         this.form.T1Form.fee_rate = (this.form.T1Form.fee_rate * 1).toFixed(2)
         this.$forceUpdate()
      }
    }
  }
}
</script>

<style scoped>
.index{
  width: 100%;
  margin-bottom: 30px;
 }
 .clearfix{
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
  .t1-cash{
   display: flex;
   align-items: center;
 }
</style>